<template>
	<view class="page">
		<u-form class="form" :model="form" ref="uForm">
			<view class="title">
				<view class="title_left">境外入黔信息登记</view>
				<view class="title_right">English</view>
			</view>
			<u-form-item label="姓名" required="true" label-position="top">
				<u-input v-model="form.name" placeholder="请填写姓名" />
			</u-form-item>

			<u-form-item required="true" label-position="top" label="证件类型">
				<u-input v-model="form.IdCardType" type="select" placeholder="请选择证件类型" @click="click" />
			</u-form-item>
			<u-select v-model="show" :list="IdCardTypeList" mode="single-column" @confirm="confirm"></u-select>

			<u-form-item label="证件号码" required="true" label-position="top">
				<u-input v-model="form.IdCard" placeholder="请填写证件号码" />
			</u-form-item>
			<u-form-item label="手机号码" required="true" label-position="top">
				<u-input v-model="form.phone" placeholder="请输入手机号码" />
			</u-form-item>

			<u-form-item required="true" label-position="top" label="国籍">
				<u-input v-model="form.country" type="select" placeholder="请选择国籍" @click="click1" />
			</u-form-item>
			<u-select v-model="show1" :list="countryList" mode="single-column" @confirm="confirm1"></u-select>

			<u-form-item required="true" label-position="top" label="性别">
				<u-input v-model="form.sex" type="select" placeholder="请选择性别" @click="click2" />
			</u-form-item>
			<u-select v-model="show2" :list="sexList" mode="single-column" @confirm="confirm2"></u-select>

			<u-form-item label-position="top" label="是否属于贵州籍">
				<u-input v-model="form.guizhou" type="select" placeholder="请选择是否属于贵州籍" @click="click3" />
			</u-form-item>
			<u-select v-model="show3" :list="guizhouList" mode="single-column" @confirm="confirm3"></u-select>

			<u-form-item label="户籍地" label-position="top">
				<u-input v-model="form.houseHolder" placeholder="请填写户籍地" />
			</u-form-item>

			<u-form-item label-position="top" label="所在城市" required="true">
				<u-input v-model="form.city" type="select" placeholder="请选择所在城市" @click="click4" />
			</u-form-item>
			<u-select v-model="show4" :list="cityList" mode="single-column" @confirm="confirm4"></u-select>

			<u-form-item label="现住地址" required="true" label-position="top">
				<u-input v-model="form.address" placeholder="请填写现住地址" />
			</u-form-item>

			<u-form-item label-position="top" label="入境时间" required="true">
				<u-input v-model="form.times" type="select" placeholder="请选择入境时间" @click="click5" />
			</u-form-item>
			<u-picker mode="time" v-model="show5" :params="params" @confirm="confirm5"></u-picker>
			
			<u-form-item label-position="top" label="入境方式" required="true">
				<u-input v-model="form.method" type="select" placeholder="请选择入境方式" @click="click6" />
			</u-form-item>
			<u-select v-model="show6" :list="methodList" mode="single-column" @confirm="confirm6"></u-select>
			
			<u-form-item label="飞机航班" required="true" label-position="top">
				<u-input v-model="form.flight" placeholder="请填写飞机航班" />
			</u-form-item>
			
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				form: {
					name: '',
					IdCardType: '',
					IdCard: '',
					phone: '',
					country: '',
					sex: '',
					guizhou: '',
					houseHolder: '',
					city: '',
					address: '',
					times: '',
					method:'',
					flight:''
				},
				IdCardTypeList: [{
						value: '1',
						label: '中国居民身份证'
					},
					{
						value: '2',
						label: '港澳居民来往内陆通行证'
					},
					{
						value: '3',
						label: '护照'
					}
				],
				countryList: [{
						value: '1',
						label: '中国'
					},
					{
						value: '2',
						label: '英国'
					},
					{
						value: '3',
						label: '美国'
					}
				],
				sexList: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				guizhouList: [{
						value: '1',
						label: '是'
					},
					{
						value: '2',
						label: '否'
					}
				],
				cityList: [{
						value: '1',
						label: '贵阳市'
					},
					{
						value: '2',
						label: '六盘水市'
					},
					{
						value: '3',
						label: '遵义市'
					},
					{
						value: '4',
						label: '安顺市'
					},
					{
						value: '5',
						label: '毕节市'
					},
					{
						value: '6',
						label: '铜仁'
					},
					{
						value: '7',
						label: '黔东南苗族侗族自治州'
					},
					{
						value: '8',
						label: '黔南布依族苗族自治州'
					},
					{
						value: '9',
						label: '黔西南布依族苗族自治州'
					}
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				methodList: [{
						value: '1',
						label: '飞机'
					},
					{
						value: '2',
						label: '列车'
					},
					{
						value: '3',
						label: '轮船'
					},
					{
						value: '4',
						label: '客运汽车'
					}
				],
			}
		},
		methods: {
			click: function() {
				this.show = true
			},
			click1: function() {
				this.show1 = true
			},
			click2: function() {
				this.show2 = true

			},
			click3: function() {
				this.show3 = true

			},
			click4: function() {
				this.show4 = true

			},
			click5: function() {
				this.show5 = true

			},
			click6: function() {
				this.show6 = true
			
			},
			confirm: function(res) {
				this.form.IdCardType = res[0].label
			},
			confirm1: function(res) {
				this.form.country = res[0].label
			},
			confirm2: function(res) {
				this.form.sex = res[0].label
			},
			confirm3: function(res) {
				this.form.guizhou = res[0].label
			},
			confirm4: function(res) {
				this.form.city = res[0].label
			},
			confirm5: function(res) {
				this.form.times = res.year + "-" + res.month + "-" + res.day

			},
			confirm6: function(res) {
				this.form.method = res[0].label
			},
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form {
		width: 90%;
		height: 90%;
	}

	.title {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title_left {
		font-size: 50rpx;
	}

	.title_right {
		width: 140rpx;
		height: 50rpx;
		border-radius: 5rpx;
		color: #2979ff;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #2979FF;
	}
</style>
